<template>
	<div class="house-contain">
		<div class="house-img">
			<img :src="getImg">
		</div>
		<div class="house-main">
			<div class="zone-price">
				<el-tag>{{getZone}}</el-tag>
				<p>￥{{house.price}}/㎡</p>
			</div>
			<div class="title">{{house.title}}</div>

			<div class="room-hall-bathroom-area">
				<span>{{house.room}}室</span><span>{{house.hall}}厅</span><span>{{house.bathroom}}卫</span><span>{{house.area}}/㎡</span>
			</div>
		</div>
		<div class="house-footer">
			<el-tag type="success">{{house.village}}</el-tag>
			<el-button @click="toHouseDetail" v-if="ButtonType === '查看详细'">{{ButtonType}}</el-button>
			<el-button @click="deleteHouse" v-else-if="ButtonType === '下架房源'">{{ButtonType}}</el-button>
		</div>
	</div>
</template>

<script>
	import {
		deleteHouse
	} from '@/api/house'
	export default {
		props: {
			"house": {
				type: Object
			},
			"ButtonType": {
				type: String
			}
		},
		data() {
			return {
				imgSrcBase: 'https://home-y.oss-cn-hangzhou.aliyuncs.com/',
			}
		},
		created() {},
		computed: {
			getImg() {
				const url = this.imgSrcBase + this.house.imgFileNames[0]
				return url
			},
			getZone() {
				if (this.$store.getters.zones) {
					const zone = this.$store.getters.zones[this.house.zoneId - 1]
					return zone.label
				}
			},
			countPrice() {
				return parseInt(this.house.price * this.house.area / 10000)
			},
		},
		methods: {
			toHouseDetail() {
				this.$router.push({
					path: '/detail',
					query: {
						id: this.house.id
					}
				})
			},
			deleteHouse() {
				deleteHouse(this.house).then(res=>{
					if(res.code === 1){
						this.$message({
							message: res.msg,
							type: 'success'
						});
						this.$emit("delFlashData", this.house.id)
					}
				})
			}
		}
	}
</script>

<style scoped>
	p {
		margin: 0;
		padding: 0;
	}

	.house-footer .el-tag {
		float: left;
	}

	.house-main .room-hall-bathroom-area {
		text-align: left;
		padding-top: 40px;
	}

	.house-main .room-hall-bathroom-area span {
		margin-right: 20px;
	}

	.house-main .title {
		text-align: left;
		padding-top: 20px;
	}

	.house-main {
		height: 210px;
	}

	.house-main .zone-price {
		height: 40px;
		margin-top: 22px;
	}

	.house-main .zone-price .el-tag {
		float: left;
	}

	.house-contain {
		position: relative;
		height: 300px;
		margin: 30px 20px;
		padding: 15px;
		background-color: white;
	}

	.house-img {
		float: left;
		margin: 23px 50px 23px 20px;
	}

	.house-img img {
		height: 250px;
		width: 100%;
		object-fit: cover;
	}
</style>
